<template>
	<view class="gifPage">
		<view class="top">
			<i class="iconfont iconzuojiantou" @tap='goBack'></i>
			<text class="two">嗨遇</text>
			<view class="three">
				<view class="two_left">
					<i class='iconfont iconliaotian'></i>
					<text>112</text>
				</view>
				<view class="two_right" @tap="goPerInfo">
					<image src="../../static/1.jpg"></image>
				</view>
			</view>
		</view>
		<!-- gif图 -->
		<view class="content" @tap="goSlidePage">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			goPerInfo (){
				uni.navigateTo({
					url:"/pages/perInfo/perInfo"
				})
			},
			goSlidePage (){
				uni.navigateTo({
					url:'/pages/tantan/index'
				})
			},
			goBack (){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #f2f2f2;
	}
.gifPage{
	width: 100%;
	.top{
		width: 100%;
		padding: 50rpx 25rpx 25rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		.three{
			display: flex;
			.two_left{
				position: relative;
				.iconliaotian{
					font-size: 55rpx;
					color: #3678ff;
					margin-right: 15rpx;
				}
			  text{
				  position: absolute;
				  top:-5rpx;
				  right: -5rpx;
				  font-size: 20rpx;
				  transform: scale(0.6);
				  display: inline-block;
				  padding: 2rpx;
				  background:rgba(255,0,0,1);
				  border-radius:11rpx;
				  color:#fff;
			  }	  
			}
			.two_right{
				width:60rpx;
				height:60rpx;
				border-radius:30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
	}
	.content{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;-
		height: 100%;
		position: absolute;
		top:140rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url(../../static/img.gif);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
	}
}
</style>
